<template>
  <el-dialog
    :title="title"
    v-model="dialogFormVisible"
    :before-close="handleClose"
    width="50%"
  >
    <div class="class-dialog" v-loading="!async">
      <el-form
        class="class-dialog_form"
        v-if="async"
        @submit.prevent
        label-width="140px"
      >
        <el-form-item label="上一级分类" v-if="async && viewModel">
          <div class="class-dialog_flex">
            <f-code v-if="viewModel.fatherRelation">{{
              viewModel.fatherRelation.name
            }}</f-code>
            <f-code v-else>无</f-code>
            <div class="class-intro">
              可在分类管理中,拖动修改分类的上下级关系
            </div>
          </div>
        </el-form-item>
        <el-form-item label="名称" :required="true">
          <el-input
            v-model="viewModel.name"
            maxlength="10"
            placeholder="请输入分类名称(10个字以内)"
          ></el-input>
          <div class="class-intro">分类名称(10个字以内)</div>
        </el-form-item>
        <el-form-item label="图片/图标">
          <f-select-image
            v-model="viewModel.icon"
            :cssStyle="screen"
          ></f-select-image>
          <div class="class-intro">
            请上传分类图片,建议尺寸100px*100px 大小40Kb内
          </div>
        </el-form-item>
        <el-form-item label="是否启用">
          <div class="class-dialog_flex">
            <el-switch v-model="viewModel.isEnable"></el-switch>
            <div class="class-intro">不启用时前台不显示</div>
          </div>
        </el-form-item>
      </el-form>
      <!-- <div class="edit-line" v-if="async">
        <zk-auto-form
          :serviceConfig="viewModel.autoForm"
          v-if="async"
          @saveForm="saveForm"
          ref="zkAutoForm"
        ></zk-auto-form>
      </div> -->
    </div>
  </el-dialog>
</template>

<script>
import ala from "@/service/ala.js";
import servcie from "../service/index";
export default {
  props: {
    type: {},
    title: {},
  },
  data() {
    return {
      viewModel: null,
      isAdd: true,
      dialogFormVisible: false,
      async: false,
      screen: {
        width: "100px",
        height: "100px",
      },
    };
  },

  methods: {
    async init(id, fatherId) {
      this.async = false;
      this.viewModel = null;
      this.dialogFormVisible = true;
      this.isAdd = true;
      if (id > 0) {
        this.isAdd = false;
      }
      if (id === 0) {
        var data = {
          name: "熊13",
          type: "com.alabo.basic.relation.dtos.ProductClassRelation",
        };
        this.viewModel = await ala.httpPost("relationAdmin/addOrUpdate", data);
      } else {
        this.viewModel = await servcie.view(id, fatherId);
      }

      if (this.viewModel && this.viewModel) {
        this.async = true;
      }
    },
    handleClose() {
      this.dialogFormVisible = false;
    },
    async saveForm(models) {
      this.viewModel.relation.value = JSON.stringify(models);
      var response = await this.$admin.relationSave(this.viewModel.relation);
      if (response) {
        this.$ala.toast("保存成功");
        this.$emit("saveForm", response, this.isAdd);
        this.handleClose();
      }
      if (this.$refs.zkAutoForm) {
        this.$refs.zkAutoForm.setSaveStatus(false);
      }
    },
  },
};
</script>



<style rel="stylesheet/scss" lang="scss">
.class-dialog {
  min-height: 500px;
  margin-top: 10px;
  padding: 0 10px;

  .class-dialog_form {
    .class-dialog_flex {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .el-form-item__label {
      font-weight: 400;
    }
  }
  .class-intro {
    font-size: 11px;
    color: #999;
    line-height: 1.8;
  }
}
</style>
